Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE] 페어룸 타이머 기능 구현 #114

Merged
merged 6 commits into from
Jul 25, 2024
Merged

[FE] 페어룸 타이머 기능 구현 #114

merged 6 commits into from
Jul 25, 2024

Conversation

anttiey
Copy link
Contributor

@anttiey anttiey commented Jul 24, 2024

연관된 이슈

구현한 기능

  • 페어룸 내 타이머 기능을 구현하였습니다.

상세 설명

  • 아직 온보딩이 구현되지 않아서 타이머 시간을 설정해 줄 수 없습니다. 우선 DEFAULT_TIME 값을 주어 테스트 진행했습니다.
  • 컴포넌트 안에 포맷팅을 위한 함수가 3개 있는데, 별도 util 파일로 분리해야 할지 고민입니다.
  • 최대한 애니메이션을 부드럽게 넣어 주려고 했는데... 저는 여기까지가 한계인가 봅니다 🥹

@anttiey anttiey added the 🧑‍💻 feat 신규 기능 개발 label Jul 24, 2024
@anttiey anttiey self-assigned this Jul 24, 2024
@anttiey anttiey linked an issue Jul 24, 2024 that may be closed by this pull request
Copy link
Contributor

@greetings1012 greetings1012 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다!
리팩터링 할 부분은 이번 스프린트가 끝나고 같이 고민해보는 걸로 해요!


useEffect(() => {
if (isActive && timeLeft > 0) {
timerRef.current = setInterval(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setInterval로 타이머 시간을 계산하면 큰 오차가 발생할 수도 있어요.
이번 스프린트가 끝난 후, Date를 이용해 현재 시간을 계산하는 로직으로 다시 구현해봐도 좋을 것 같아요! 😁
관련 블로그

border: 0.8rem solid transparent;
border-radius: 50%;
background-image: linear-gradient(white, white),
conic-gradient(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍
다만 초 단위로 렌더링되다 보니 애니메이션이 부드럽게 작동하지는 않네요 😢
추후 리팩터링 때 밀리초 단위를 적용하면 더 부드럽게 작동할 수 있겠네요!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

역시 타이머 장인 👍

Copy link
Contributor

@dle234 dle234 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨어요~~~
사소한 버그 발견해서 추후에 수정하면 좋을 것 같아요!
image
이 부분에서 시간 멈췄을때 오른쪽 버튼들이 disabled 되지만 초기화 버튼 선택이 돼요 ! 버튼이 활성화 된 상태이면 좋을 것 같습니다!

(++)

image

추가로 의도한건지는 모르겠지만 타이머 카드만 높이가 고정되어있는 것 같아요!!

@anttiey anttiey merged commit b639044 into FE/dev Jul 25, 2024
@anttiey anttiey deleted the FE/feature/#61 branch July 25, 2024 06:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🧑‍💻 feat 신규 기능 개발
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[FE] 페어룸 타이머 기능 구현
3 participants